<template>
  <div>
    <h1>景点列表</h1>
    <div style="text-align: left" v-if="showBtn">
      <el-button @click="deleteScenicByIds" size="small" type="primary">
        <el-icon><delete/></el-icon>&nbsp;批量删除</el-button>
    </div>
    <el-table
        :data="scenicList"
        :header-cell-style="{textAlign:'center'}"
        stripe style="width: 100%;border-radius: 5px 5px 0 0;"
        @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="80"> </el-table-column>
      <el-table-column type="expand">
      <template #default="scope">
        <el-descriptions border>
          <el-descriptions-item label="景点描述">
            {{scope.row.scenicDescription}}
          </el-descriptions-item>
        </el-descriptions>
      </template>
      </el-table-column>
      <el-table-column   align="center" prop="scenicName" label="景区名称" >
        <template #default="scope">
          {{scope.row.scenicName}}
        </template>
      </el-table-column>
      <el-table-column  align="center" prop="scenicType" label="景区类型">
        <template #default="scope">
          {{scenicType[scope.row.scenicType]}}
        </template>
      </el-table-column>
      <el-table-column label="景区描述">
      <template #default="scope">{{scope.row.scenicDescription.substring(0,15)}}...</template>
      </el-table-column>
      <el-table-column align="center">
        <template #header>
          <el-input v-model="search" style="width: 210px" placeholder="输入景点名称搜索" >
            <template #suffix>
              <i  :class="[!loading ? 'iconfont icon-sousuo' : 'iconfont icon-jiazai1 tra']"></i>
            </template>
          </el-input>
        </template>
        <template #default="scope">
          <router-link class="RLink" :to="`/scenicOperate/updateScenic/${scope.row.scenicId}`">
            <el-button size="small" type="primary"><el-icon><edit/></el-icon>&nbsp;编辑</el-button>&nbsp;
          </router-link>
          <el-button @click="deleteById(scope.row.scenicId)" size="small" type="primary"><el-icon><delete/></el-icon>&nbsp;删除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <div v-if="search===''">
    <el-pagination
        style="background-color: #ffffff;border-radius:0  0 5px 5px;justify-content: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        :layout="layout"
        :total="total"
        :pager-count=5
    >
    </el-pagination>
    </div>
  </div>
</template>

<script>
import {deleteScenic, getScenic, searchScenicList} from "@/api/multimedia";
import {getDevice} from "@/utils/get-device";
import {Delete, Edit} from "@element-plus/icons";

export default {
  name: "lookupScenic",
  components: {Delete, Edit},
  data(){
    return{
      loading:false,
      search:'',
      scenicList:[],
      currentPage:1,
      total:0,
      pageSize:10,
      scenicType:{'LAKE':'湖','FLOWER':'花','KIOSK':'亭','HILL':'山','TREE':'树'},
      layout:'total, sizes, prev, pager, next, jumper',
      showBtn:false,
      listDelete:[]
    }
  },
  watch:{
    search(newVal){
      clearTimeout(this.timeout)
      if( newVal!==''){
        this.timeout=setTimeout(()=>{
          this.searchScenic(newVal)
        },2000)
      }
      else {
        this.getScenicList()
      }

    }
  },
  mounted() {
    if (getDevice()){
      this.layout='total,prev, pager, next'
    }
    this.getScenicList()
  },
  methods:{
    //删除单个数据
    deleteById(scenicId){
      const ids=[]
      ids.push(scenicId)
      deleteScenic(ids).then(()=>{
        this.getScenicList()
      })
    },
    //批量删除数据
    deleteScenicByIds(){
      const ids=[]
      this.listDelete.forEach(scenic =>{
        ids.push(scenic.scenicId)
      })
      deleteScenic(ids).then(()=>{
        this.getScenicList()
      })
    },
    handleSelectionChange(select){
      this.showBtn = select.length > 1;
      this.listDelete=select
    },
    handleSizeChange(val) {
      this.pageSize = val
      if (this.search!==''){
        this.searchScenic(this.search)
      }else {
        this.getScenicList()
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val
      if (this.search!==''){
        this.searchScenic(this.search)
      }else {
        this.getScenicList()
      }
    },
    getScenicList(){
      getScenic(this.currentPage,this.pageSize).then(response =>{
        this.total=response.data.total
        this.scenicList=response.data.scenicList
      })
    },
    searchScenic(name){
      this.loading=true
      searchScenicList(name).then(response=>{
        this.loading=false
        const {scenicList}=response.data
        this.scenicList= scenicList
      }).catch(()=>{
        this.loading=false
      })
    }
  },
}
</script>

<style lang="less" scoped>
.tra{
  animation: rotate 6s linear infinite;
}
.RLink{
  text-decoration: none;
  color: #000000;
&:hover{
   color: #666;
 }
}
</style>
